<template>
  <div class="under-construction">
    <el-empty description=" ">
      <template #image>
        <div class="construction-icon">
          <el-icon class="hammer"><Edit /></el-icon>
          <el-icon class="wrench"><Setting /></el-icon>
        </div>
      </template>
      <h2>页面正在开发中 🚧</h2>
      <p>臣退了，这一退就是一辈子。。。这个页面就交给你了靓仔~</p>
      <el-button
          type="primary"
          @click="router.back()"
      >
        返回上一页
      </el-button>
    </el-empty>
  </div>
</template>

<script setup>
import { Edit, Setting } from '@element-plus/icons-vue';
import { useRouter } from 'vue-router';

const router = useRouter();

</script>

<style scoped>
.under-construction {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 70vh;
  text-align: center;
}

.construction-icon {
  position: relative;
  margin: 0 auto;
  width: 100px;
  height: 100px;
}

.hammer {
  position: absolute;
  font-size: 60px;
  color: var(--el-color-warning);
  animation: hammering 2s infinite ease-in-out;
  transform-origin: top right;
}

.wrench {
  position: absolute;
  font-size: 50px;
  color: var(--el-color-primary);
  left: 40px;
  top: 40px;
  animation: rotating 3s infinite linear;
}

@keyframes hammering {
  0%, 100% { transform: rotate(-10deg); }
  50% { transform: rotate(30deg); }
}

@keyframes rotating {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

h2 {
  margin: 20px 0 10px;
  color: var(--el-text-color-primary);
}

p {
  color: var(--el-text-color-secondary);
  margin-bottom: 20px;
}
</style>
